{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<section class="section">
  <div class="card">
    <div class="card-title ths-staff-heading">
      <div class="icon">🩺</div>
      <div>
        <h1 class="h1" style="margin:0">Telehealth Bookings</h1>


        <div class="small">Search, filter, sort, export, and run quick actions.</div>
      </div>
      <div style="margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center">
        <div class="tabs">
          <a class="tab" href="#" data-preset="today">Today</a>
          <a class="tab" href="#" data-preset="this_week">Week</a>
          <a class="tab" href="#" data-preset="this_month">Month</a>
        </div>
        <a class="btn btn-ghost" href="#" data-preset="unpaid">Unpaid</a>
        <a class="btn btn-ghost" href="#" data-export="csv">Export CSV</a>
        <a class="btn btn-ghost" href="#" data-export="pdf">Export PDF</a>
      </div>
    </div>
<div class="bulk-bar ths-bulk-toolbar" role="group" aria-label="Bulk actions">
  <label class="ths-bulk-label">Bulk actions:</label>
  <select data-bulk-action="bookings" class="input" style="min-width:220px;">
    <option value="">Select action…</option>
    <option value='mark_paid'>Mark paid</option><option value='mark_unpaid'>Mark unpaid</option>
    
    
  </select>
  <a href="#" class="btn btn-dark" data-bulk-apply data-bulk-module="bookings">Apply</a>
  <span class="ths-bulk-hint">Select table rows first.</span>

  <a href="#" class="btn btn-light" data-export-selected data-export-module="bookings" data-export-format="csv">Export selected (CSV)</a>
  <a href="#" class="btn btn-light" data-export-selected data-export-module="bookings" data-export-format="pdf">Export selected (PDF)</a>
</div>
    <div class="sep"></div>

    <form method="get" class="row" style="gap:10px;flex-wrap:wrap;align-items:flex-end">
      <input class="input" style="max-width:320px" type="text" name="q" value="{{ q|default:'' }}" placeholder="Search name / phone / email" />

      <label class="small">Status
        <select class="input" name="status">
          <option value="">All</option>
          <option value="NEW" {% if status == "NEW" %}selected{% endif %}>New</option>
          <option value="CONFIRMED" {% if status == "CONFIRMED" %}selected{% endif %}>Confirmed</option>
          <option value="COMPLETED" {% if status == "COMPLETED" %}selected{% endif %}>Completed</option>
          <option value="CANCELLED" {% if status == "CANCELLED" %}selected{% endif %}>Cancelled</option>
        </select>
      </label>

      <label class="small">Paid
        <select class="input" name="paid">
          <option value="">All</option>
          <option value="yes" {% if paid == "yes" %}selected{% endif %}>Paid</option>
          <option value="no" {% if paid == "no" %}selected{% endif %}>Unpaid</option>
        </select>
      </label>

      <label class="small">Provider
        <select class="input" name="provider_id">
          <option value="">All</option>
          {% for p in providers %}
            <option value="{{ p.id }}" {% if provider_id|default:'' == p.id|stringformat:"s" %}selected{% endif %}>{{ p.full_name }}</option>
          {% endfor %}
        </select>
      </label>

      <label class="small">From
        <input class="input" type="date" name="date_from" value="{{ date_from|default:'' }}">
      </label>

      <label class="small">To
        <input class="input" type="date" name="date_to" value="{{ date_to|default:'' }}">
      </label>

      <button class="btn" type="submit">Apply</button>
      <a class="btn btn-ghost" href="{% url 'website:staff_telehealth_booking_list' %}">Reset</a>
    </form>

    <div class="sep"></div>

    <div class="table-wrap">
      <div class="table-sticky">
<table class="table table-sticky-inner">
        <thead>
          <tr>
      <th><input type="checkbox" data-select-all></th>
            <th><a class="sort-link" href="#" data-sort="id">ID <span class="sort-icon"></span></a></th>
            <th><a class="sort-link" href="#" data-sort="full_name">Client <span class="sort-icon"></span></a></th>
            <th><a class="sort-link" href="#" data-sort="mode">Mode <span class="sort-icon"></span></a></th>
            <th><a class="sort-link" href="#" data-sort="status">Status <span class="sort-icon"></span></a></th>
            <th><a class="sort-link" href="#" data-sort="is_paid">Paid <span class="sort-icon"></span></a></th>
            <th>Slot</th>
            <th><a class="sort-link" href="#" data-sort="created_at">Created <span class="sort-icon"></span></a></th>
            <th style="min-width:240px">Quick Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for b in bookings %}
          <tr>
      <td><input type="checkbox" data-row-check value="{{ b.id }}"></td>
            <td>#{{ b.id }}</td>
            <td>
              <div style="font-weight:800">{{ b.full_name }}</div>
              <div class="small">{{ b.phone }} · {{ b.email }}</div>
            </td>
            <td>{{ b.get_mode_display|default:b.mode }}</td>
            <td><span class="pill">{{ b.get_status_display|default:b.status }}</span></td>
            <td>{% if b.is_paid %}✅{% else %}—{% endif %}</td>
            <td class="small">{% if b.slot %}{{ b.slot.date }} {{ b.slot.start_time }}–{{ b.slot.end_time }}{% else %}—{% endif %}</td>
            <td class="small">{{ b.created_at|date:"Y-m-d H:i" }}</td>
            <td>
              <div class="row" style="gap:8px;flex-wrap:wrap">
                <a class="btn" href="{% url 'website:staff_telehealth_booking_detail' b.id %}">Open</a>
                <form method="post" action="{% url 'website:staff_booking_quick_action' b.id %}" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
                  {% csrf_token %}
                  <select class="input" name="action" style="min-width:160px">
                    <option value="">— Action —</option>
                    <option value="mark_paid">Mark paid</option>
                    <option value="mark_unpaid">Mark unpaid</option>
                    <option value="confirm">Confirm</option>
                    <option value="complete">Complete</option>
                    <option value="cancel">Cancel</option>
                  </select>
                  <button class="btn btn-ghost" type="submit">Go</button>
                </form>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="8" class="small">No bookings found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
</div>
    </div>

    
<div class="row" style="justify-content:space-between;align-items:center;margin-top:12px;gap:10px;flex-wrap:wrap">
  <div class="small">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }} · {{ page_obj.paginator.count }} records</div>
  <div class="row" style="gap:6px;flex-wrap:wrap">
    {% if page_obj.has_previous %}
      <a class="btn btn-ghost" href="?{% if request.GET %}{{ request.GET.urlencode|cut:'page='|cut:'&&' }}&{% endif %}page={{ page_obj.previous_page_number }}">← Prev</a>
    {% endif %}
    {% if page_obj.has_next %}
      <a class="btn btn-ghost" href="?{% if request.GET %}{{ request.GET.urlencode|cut:'page='|cut:'&&' }}&{% endif %}page={{ page_obj.next_page_number }}">Next →</a>
    {% endif %}
  </div>
</div>

  </div>
</section>
{% endblock %}